<template>
  <view class="grade-comtainer">
    <view class="grade-comtainer-content">
      <subGrade
        :gradeOption="gradeOptions"
        :selectedObj="currentGrade"
        @select="handleGetCurrentGrade"
      />
    </view>
    <view class="button-wrap">
      <finish-button @click="handleSelectGradeOk" :width="690" />
    </view>
  </view>
</template>
<script>
import subGrade from "./sub-grade";
import finishButton from "@/components/finish-button/index";
import "./index.scss";
export default {
  components: { subGrade, finishButton },
  props: {
    gradeInfo: {
      type: Object,
      default: () => {
        return {};
      }
    },
    gradeOptions: {
      type: Array,
      default: () => []
    },
    /**弹窗状态 */
    isOpenedModal: {
      type: Boolean
    }
  },
  data() {
    return {
      currentGrade: {}
    };
  },
  watch: {
    isOpenedModal: {
      handler: function(newVal) {
        if (newVal) this.currentGrade = { ...this.gradeInfo };
      },
      immediate: true
    }
  },
  methods: {
    handleClose() {
      this.currentGrade = {};
    },
    handleGetCurrentGrade(obj) {
      this.currentGrade = obj;
    },
    handleSelectGradeOk() {
      /**TODO: */
      if (!this.currentGrade.id) {
        console.log("todo...  error");
        return;
      }
      this.$emit("getGrade", this.currentGrade);
      this.$emit("modalClose");
    }
  }
};
</script>
